import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import menuList from "../../config/menuConfig";
import "./index.less";
import { Modal, Breadcrumb } from "antd";
import memoryUtils from "../../utils/memory";
import storageUtils from "../../utils/storageUtils";
import rightArrow from "./img/right-allow.png";
import LinkButton from "../../components/link-button";
import closeImg from "./img/ic_shutdown.png";
const { confirm } = Modal;

function Model() {
  return (
    <div className="login-model">
      <div className="login-area">
        {/* 更换手机号 */}
        <div className="top">
          <div>更换手机号</div>
          <div>
            <img className="r-arrow" src={rightArrow} alt="" />
          </div>
        </div>
        {/* 更换密码 */}
        <div className="middle">
          <div className="phone">15678943456</div>
          <div className="updata-passward">
            更改密码
            <img className="r-arrow" src={rightArrow} alt="" />
          </div>
          <div>3984573</div>
        </div>
      </div>
      <div className="bottom">
        <div className="logout">
          <div>退出登录</div>
          <div>
            <img className="r-arrow" src={closeImg} alt="" />
          </div>
        </div>
      </div>
    </div>
  );
}

class Header extends Component {
  state = {
    // 显示/隐藏登录弹窗
    login_model: false
  };
  // 动态改变标题
  getTitle = () => {
    const path = this.props.location.pathname.slice(1).split("/")[0];
    let title;
    let subTitle = "";
    menuList.forEach(item => {
      if (item.key === path) {
        title = item.title;
        if (title === "概况") {
          title = "良品铺";
        }
      } else if (item.children) {
        const cItem = item.children.find(cItem => cItem.key === path);
        if (cItem) {
          title = cItem.title;
          if (cItem.subSon) {
            subTitle = cItem.subSon[0].title;
          }
        }
      }
    });
    return { title, subTitle };
  };
  // 退出登录
  logout = () => {
    confirm({
      // title: "退出登录?",
      content: "退出登录?",
      // 使用箭头函数得到this
      onOk: () => {
        console.log("确定", this);
        storageUtils.removeUser();
        memoryUtils.user = {};
        this.props.history.replace("/login");
      }
    });
    console.log("logout");
  };
  // 显示/隐藏登录弹窗
  openModel = () => {
    this.setState({
      login_model: !this.state.login_model
    });
  };
  componentDidMount() {
    this.getTitle();
  }
  render() {
    const { subTitle, title } = this.getTitle();

    return (
      <div className="header">
        {/* <div className="header-top">
          <span>欢迎，admin</span>
          <LinkButton href="#" onClick={this.logout}>
            退出
          </LinkButton>
        </div> */}
        <div className="header-bottom">
          <div className="header-bottom-left">
            <Breadcrumb>
              <Breadcrumb.Item>{title}</Breadcrumb.Item>
              {}
              <Breadcrumb.Item>{subTitle}</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className="header-bottom-right" onClick={this.openModel}>
            <img className="r-arrow" src={rightArrow} alt="" />
            <span>15678943456</span>
            <img
              src="http://api.map.baidu.com/images/weather/day/qing.png"
              alt=""
              onClick={this.logout}
            />
          </div>
        </div>
        {this.state.login_model ? <Model /> : null}
      </div>
    );
  }
}
export default withRouter(Header);
